<template>
	<!-- 日间模式 -->
	<div id="navi-top">
		<el-menu :default-active="activeIndex.path" class="el-menu-demo" mode="horizontal" @select="handleSelect"
			:ellipsis="false" active-text-color="royalblue" router>
			<el-menu-item index="/">枫树下奶罐 Milkcan</el-menu-item>
			<el-menu-item index="/tools">小工具</el-menu-item>
			<!-- <el-menu-item index="comments" disabled>评论反馈</el-menu-item> -->
			<el-menu-item index="/more" disabled>敬请期待...</el-menu-item>
			<div style="flex-grow: 1" />
			<el-menu-item index="/about">关于</el-menu-item>
			<!-- <el-sub-menu index="2">
			<template #title>Workspace</template>
			<el-menu-item index="2-1">item one</el-menu-item>
			<el-menu-item index="2-2">item two</el-menu-item>
			<el-menu-item index="2-3">item three</el-menu-item>
			<el-sub-menu index="2-4">
				<template #title>item four</template>
				<el-menu-item index="2-4-1">item one</el-menu-item>
				<el-menu-item index="2-4-2">item two</el-menu-item>
				<el-menu-item index="2-4-3">item three</el-menu-item>
			</el-sub-menu>
		</el-sub-menu> -->
			<!-- <el-menu-item index="3" disabled>Info</el-menu-item> -->
			<!-- <el-menu-item index="4">Orders</el-menu-item> -->
		</el-menu>
	</div>
	<!-- 夜间模式 -->
	<el-menu v-if="false" :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" background-color="#545c64"
		text-color="#fff" active-text-color="#ffd04b" @select="handleSelect">
		<el-menu-item index="1">Processing Center</el-menu-item>
		<el-sub-menu index="2">
			<template #title>Workspace</template>
			<el-menu-item index="2-1">item one</el-menu-item>
			<el-menu-item index="2-2">item two</el-menu-item>
			<el-menu-item index="2-3">item three</el-menu-item>
			<el-sub-menu index="2-4">
				<template #title>item four</template>
				<el-menu-item index="2-4-1">item one</el-menu-item>
				<el-menu-item index="2-4-2">item two</el-menu-item>
				<el-menu-item index="2-4-3">item three</el-menu-item>
			</el-sub-menu>
		</el-sub-menu>
		<el-menu-item index="3" disabled>Info</el-menu-item>
		<el-menu-item index="4">Orders</el-menu-item>
	</el-menu>
</template>

<script setup name="NaviTop">
import { computed, ref, watchEffect } from "vue";
import { useRoute } from "vue-router";

// console.log(useRoute())
const activeIndex = computed(() => {
	return useRoute();
});
watchEffect(() => console.log(activeIndex.value.path));

// const activeIndex2 = ref("1");
// 开发时控制台调试用
const handleSelect = (key, keyPath) => {
	console.log(key, keyPath);
	// console.log(activeIndex.value.path);
};
</script>

<style lang="less" scoped>
#navi-top ul {
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	padding: 0 0.5rem;
	background-color: white;
}
</style>